<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        html,
        body {
            background-color: #FFF;
            background-image: url(../../image/user/my-login-bg.png);
            width:100%;
            height:100%;
            background-size:cover;
            /*background-position: bottom;*/
            background-repeat: no-repeat;
            /*background-size: contain;*/
            /*height: 100%;*/
        }

        .login-header {
            margin-top: 20px;
            display: inline-block;
            width: 100%;
        }

        .login-header-left {
            float: left;
            position: relative;
            padding-left: 30px;
        }

        .login-header-left .left-title {
            font-size: 1.1rem;
        }

        .login-header-left .left-en {
            font-size: 0.65rem;
        }

        .login-header-right {
            float: right;
            position: relative;
        }

        .login-logo {
            position: relative;
            width: 80px;
            margin: 45px auto 30px auto;
        }

        .login-logo img {
            width: 100%;
        }

        .login-area {
            margin-top: 15%;
            width: 100%;
        }

        .login-area .input-box {
            width: 70%;
            margin: 0 auto 23px auto;
            height: 40px;
            display: block;
            border-radius: 20px;
            border: 1px solid rgba(129,184,70, 0.3)
        }

        .login-area .input-box input {
            height: 28px;
            font-size: 0.75rem;
            margin-top: 5px;
            padding-left: 16px;
            padding-right: 15px;
        }

        .login-area .login-btn {
            width: 70%;
            margin: 0 auto 0 auto;
            height: 40px;
            display: block;
            border-radius: 20px;
            background-image: linear-gradient(to right, #81B846, #81B846);
            line-height: 40px;
            text-align: center;
            color: #fff;
            box-shadow: 0 5px 5px rgba(143,184,99, 0.2);
            transition: all .3s;
        }

        .login-area .login-btn:active {
            background-image: linear-gradient(to right, #81B846, #81B846);
            transform: scale(0.9);
            transition: all .05s;
        }

        .login-area .login-links {
            width: 100%;
            text-align: center;
            font-size: 0.65rem;
            margin-top: 17px;
            color: #efefef;
        }

        .login-area .login-links a {
            padding: 0 5px;
            color: #909399;
        }

        .login-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 120px;
        }

        .login-footer .footer-top {
            width: 80%;
            background-image: linear-gradient(0, #efefef, #efefef 50%, transparent 50%);
            background-size: auto 1px;
            background-repeat: repeat-x;
            background-position: center;
            margin: 0 auto;
            text-align: center;
        }

        .login-footer .footer-top i {
            font-style: normal;
            background-color: #fff;
            font-size: 0.65rem;
            color: #909399;
            padding: 0 20px;
        }

        .footer-btn {
            width: 80px;
            margin: 20px auto 0 auto;
        }

        .footer-btn-qq {
            position: relative;
            float: left;
            width: 28px;
        }

        .footer-btn-qq img {
            width: 100%;
        }

        .footer-btn-wx {
            position: relative;
            float: right;
            width: 28px;
        }

        .footer-btn-wx img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="login-header" id="login-header">
        <div class="login-header-left" style="color:#81B846;">
            <div class="left-title">智能生活</div>
            <div class="left-en">Sign in</div>
        </div>
        <div class="login-header-right">
        </div>
    </div>
    <div class="login-logo"><img src="../../image/user/myLogo.png"></div>

    <div class="login-area">
        <div class="input-box">
            <input type="text" placeholder="用户名/手机号" id="input_username"></input>
        </div>
        <div class="input-box">
            <input type="password" placeholder="请输入密码" id="input_password"></input>
        </div>
        <div class="login-btn" tapmode onclick="loginBtnOnclick()">
            登录
        </div>
        <div class="login-links">
            <a tapmode onclick="registerOnclick()">注册账户</a> /
            <a tapmode onclick="forgetPwOnclick()">忘记密码？</a>
        </div>
    </div>
    <!-- <div class="login-footer">
        <div class="footer-top"><i>其他登录方式</i></div>
        <div class="footer-btn">
            <div class="footer-btn-qq"><img src="../../image/user/login_qq.png"></div>
            <div class="footer-btn-wx"><img src="../../image/user/login_wx.png"></div>
        </div>
    </div> -->
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    var toast = new auiToast();
    apiready = function() {
        api.parseTapmode();
        var header = $api.byId('login-header');
        $api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        $("#input_password").val('zzzzzzzz');
        $("#input_username").val('znsh');

    };

    function closeWin() {
        api.closeWin({});
    }

    function registerOnclick() {
        api.openWin({
            name: 'user_register_win',
            url: './register_win.html'
        });
    }

    function forgetPwOnclick() {
        api.openWin({
            name: 'user_forgetPw_win',
            url: './forgetPw_win.html'
        });
    }

    function loginBtnOnclick() {
        Login();
    }

    function Login() {
      api.openWin({
          name: 'toIndex',
          url: '../../index.html'
      });
        // var username = $("#input_username").val();
        // var password = $("#input_password").val();
        // api.ajax({
        //     url: 'http://95.163.194.157:8080/kezhan/user/login',
        //     method: 'post',
        //     data: {
        //         values: {
        //             username: username,
        //             password: password
        //         }
        //     }
        // }, function(ret, err) {
        //     if (ret) {
        //         // alert( JSON.stringify( ret ) );
        //         if (ret.code == 200) {
        //             $api.setStorage('username', username);
        //
        //         }
        //         else {
        //             toast.fail({
        //                 title: ret.msg,
        //                 duration: 2000
        //             });
        //         }
        //     }
        //     else {
        //       toast.fail({
        //           title: '网络错误',
        //           duration: 2000
        //       });
        //     }
        // });
    }

</script>

</html>
